<template>
  <div id="app">
    <headd />
    <div class="us-box">
      <div class="joinleft">
        <h1 class="animate-fade-in-up">加入我们的爱宠社区</h1>
        <p class="animate-fade-in-up animation-delay-300">成为我们使命的一部分，帮助宠物找到永远的家</p>
      </div>
      
    </div>
    <div class="VJ">
      <!-- 志愿者部分 -->
      <div class="joinv p-8">
        <div class="hh">
          <div class="h-16 w-16 bg-orange-600 rounded-full flex items-center justify-center mb-6 animate-pulse tub">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
            </svg>
          </div>
        </div>
        <h2 class="font-bold text-orange-800 ys">成为志愿者</h2>
        <p class="ysp text-orange-700">帮助我们照顾动物并协助领养活动 您的时间将为宠物的生活带来改变</p>
        <button @click="openVolunteerForm"
          class="bg-gradient-to-r from-orange-600 to-orange-800 text-white px-8 py-3 rounded-full hover:from-orange-700 hover:to-orange-900 transition-colors transform hover:scale-110">
          立即申请
        </button>
      </div>
      <!-- 寄养部分 -->
      <div class="joinv p-8">
        <div class="hh">
          <div class="h-16 w-16 bg-orange-600 rounded-full flex items-center justify-center mb-6 animate-pulse tub">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 104 0 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064" />
            </svg>
          </div>
        </div>
        <h2 class="font-bold text-orange-800 ys">成为寄养家庭</h2>
        <p class="ysp text-orange-700">为需要帮助的宠物提供临时的家 寄养拯救生命，帮助宠物找到永久的家</p>
        <button @click="openFosterForm"
          class="bg-gradient-to-r from-orange-600 to-orange-800 text-white px-8 py-3 rounded-full hover:from-orange-700 hover:to-orange-900 transition-colors transform hover:scale-110">
          了解更多
        </button>
      </div>
    </div>
    <div class="why">
      <h2 class="font-bold text-center text-orange-800">为什么加入我们？</h2>
      <div class="jointhree">
        <div class="text-center group">
          <div
            class="h-16 w-16 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:animate-bounce">
            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
            </svg>
          </div>
          <h3 class="text-orange-800 whyt">产生真正的影响</h3>
          <p class="whyp text-orange-700">帮助宠物找到充满爱的家，在它们的生活中留下深刻印记</p>
        </div>
        <div class="text-center group">
          <div
            class="h-16 w-16 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:animate-bounce">
            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
          </div>
          <h3 class="text-orange-800 whyt">加入我们的社区</h3>
          <p class="whyp text-orange-700">与志同道合的动物爱好者联系，分享经验和快乐时光</p>
        </div>
        <div class="text-center group">
          <div
            class="h-16 w-16 bg-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:animate-bounce">
            <svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
            </svg>
          </div>
          <h3 class="text-orange-800 whyt">获得宝贵经验</h3>
          <p class="whyp text-orange-700">学习动物护理和领养流程，丰富您的个人和职业生活</p>
        </div>
      </div>
    </div>
    <fonnter />
    <VolunteerForm :isOpen="isVolunteerFormOpen" @close="closeVolunteerForm" />
    <FosterForm :isOpen="isFosterFormOpen" @close="closeFosterForm" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import fonnter from '../../components/fonnter.vue';
import headd from '../../components/head.vue';
import VolunteerForm from '../../components/VolunteerForm.vue';
import FosterForm from '../../components/ForstForm.vue';
import axios from 'axios';

const isVolunteerFormOpen = ref(false);
const isFosterFormOpen = ref(false);

const openVolunteerForm = () => {
  isVolunteerFormOpen.value = true;
};

const closeVolunteerForm = () => {
  isVolunteerFormOpen.value = false;
};

const openFosterForm = () => {
  isFosterFormOpen.value = true;
};

const closeFosterForm = () => {
  isFosterFormOpen.value = false;
};

const dwType = 1;
const blogType = 1;
const fetchData = async () => {
  try {
    const res = await axios.post('http://localhost:8080/Petrescue/blog/Blogs', {
      dwType: dwType,
      blogType: blogType
    })

    if (res.status === 200) {
      // 检查 res.data 是否包含 Blogs 字段
      if (res.data && res.data.Blogs !== undefined) {
      } else {
      }
    } else {
    }
  } catch (error) {
    console.error("Error fetching data:", error);
  }
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="less">
// 变量定义
@orange-600: #ea580c;
@orange-800: #7c2d12;
@orange-700: #9a3412;
@orange-gradient: linear-gradient(135deg, #fff9f0 0%, #fef3c7 100%);
@orange-border: rgba(234, 88, 12, 0.2);
@orange-light-bg: rgba(254, 243, 199, 0.3);
@orange-border-light: rgba(234, 88, 12, 0.3);

.hh {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  .tub {
    margin-left: 0;
  }
}

.us-box {
  width: 100%;
  background: @orange-gradient;
  display: flex;
  border-bottom: 1px solid @orange-border;
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.joinleft {
  padding-top: 80px;
  padding-left: 70px;
  width: 60%;
  text-align: left;
  height: 250px;

  >h1 {
    font-family: 'Arial', sans-serif;
    font-size: 50px;
    font-weight: 600;
    color: @orange-800;
  }

  >p {
    font-size: 22px;
    color: @orange-700;
  }
}

.joinright {
  height: 250px;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}

.VJ {
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
  margin-top: 20px;
  padding: 0 2rem;
}

.joinv {
  background-color: #ffffff;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  border: 1px solid @orange-border-light;
  width: 100%;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(234, 88, 12, 0.1);
  }
}

.ys {
  font-size: 30px;
  margin-bottom: 1rem;
}

.ysp {
  font-size: 15px;
  margin: 20px 0px 40px 0px;
}

.jointhree {
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
  padding: 0 2rem;
  margin-top: 2rem;
}

.why {
  margin-top: 40px;
  width: 100%;
  padding: 2rem 0;
  background-color: @orange-light-bg;

  >h2 {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
  }
}

.whyt {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 20px;
}

.whyp {
  font-size: 14px;
  margin-bottom: 20px;
  padding: 0 1rem;
}

/* 响应式调整 */
@media (max-width: 768px) {

  .VJ,
  .jointhree {
    flex-direction: column;
    align-items: center;
  }

  .joinv {
    width: 80%;
    margin-bottom: 1rem;
  }

  .joinleft {
    >h1 {
      font-size: 36px;
    }

    >p {
      font-size: 18px;
    }
  }
}
</style>